/** @format */
import type { ArticleDetail } from '@/types/http'
import { NavBar, InfiniteScroll } from 'antd-mobile'
import { useNavigate, useParams } from 'react-router-dom'
import classnames from 'classnames'
import styles from './ArticleDetail.module.scss'
import SvgIcon from '@/components/SvgIcon/SvgIcon'

import CommentItem from './components/CommentItem'
import CommentFooter from './components/CommentFooter'
import { useEffect, useState } from 'react'
import { getArticleDetailApi } from '@/api/article'

import DOMPurify from 'dompurify'
import hljs from 'highlight.js'
import 'highlight.js/styles/far.css'
import Skeleton from './Skeleton'
const Article = () => {
  const navigate = useNavigate()

  const [article, setArticle] = useState<ArticleDetail>({} as ArticleDetail)

  const [loading, setLoading] = useState(true)
  // 路由参数
  const params = useParams<{
    id: string
  }>()

  useEffect(() => {
    ;(async function () {
      if (!params.id) return
      const {
        data: { data: detail }
      } = await getArticleDetailApi(params.id)
      setArticle(detail)
      setLoading(false)
    })()
  }, [params.id])
  const loadMoreComments = async () => {}

  useEffect(() => {
    const dgHtmlDOM = document.querySelector('.dg-html')
    if (!dgHtmlDOM) return
    hljs.configure({
      ignoreUnescapedHTML: true
    })
    const elements = dgHtmlDOM.querySelectorAll<HTMLElement>('pre,code')
    elements.forEach((item) => {
      hljs.highlightElement(item)
    })
  }, [article])

  const renderArticle = () => {
    // 文章详情
    return (
      <div className='wrapper'>
        <div className='article-wrapper'>
          <div className='header'>
            <h1 className='title'>{article.title}</h1>

            <div className='info'>
              <span>{article.pubdate}</span>
              <span>{article.read_count} 阅读</span>
              <span>{article.comm_count} 评论</span>
            </div>

            <div className='author'>
              <img
                src={article.aut_photo}
                alt='aut_photo'
              />
              <span className='name'>{article.aut_name}</span>
              <span className={classnames('follow', true ? 'followed' : '')}>
                {true ? '已关注' : '关注'}
              </span>
            </div>
          </div>

          <div className='content'>
            <div
              className='content-html dg-html'
              dangerouslySetInnerHTML={{
                __html: DOMPurify.sanitize(article.content)
              }}
            />
            <div className='date'>发布文章时间：{article.pubdate}</div>
          </div>
        </div>

        <div className='comment'>
          <div className='comment-header'>
            <span>全部评论（{article.comm_count}）</span>
            <span>{article.like_count} 点赞</span>
          </div>

          <div className='comment-list'>
            <CommentItem />

            <InfiniteScroll
              hasMore={false}
              loadMore={loadMoreComments}
            />
          </div>
        </div>
      </div>
    )
  }

  return loading ? (
    <Skeleton />
  ) : (
    <div className={styles.root}>
      <div className='root-wrapper'>
        <NavBar
          onBack={() => navigate(-1)}
          right={
            <span>
              <SvgIcon name='gengduo' />
            </span>
          }>
          {true && (
            <div className='nav-author'>
              <img
                src='http://geek.itheima.net/images/user_head.jpg'
                alt=''
              />
              <span className='name'>{article.aut_name}</span>
              <span
                className={classnames(
                  'follow',
                  article.is_followed ? 'followed' : ''
                )}>
                {article.is_followed ? '已关注' : '关注'}
              </span>
            </div>
          )}
        </NavBar>
        {/* 文章详情和评论 */}
        {renderArticle()}

        {/* 底部评论栏 */}
        <CommentFooter />
      </div>
    </div>
  )
}

export default Article
